<script setup>
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useMeStore } from '@/stores/me'
import { getInvoiceList } from '@/api/me'

const listTotal = ref(0)
const pageNo = ref(1)

const invoiceList = ref([])
async function onGetInvoiceList() {
  try {
    await uni.showLoading({ title: '请稍后' })
    const { result: { records, total } } = await getInvoiceList({ pageNo: pageNo.value, pageSize: 10 })
    invoiceList.value = records
    listTotal.value = total
    uni.hideLoading()
  }
  catch (e) {
    await uni.showToast({ icon: 'none', title: e.message, duration: 2000 })
  }
}

function renderClass(status) {
  const map = {
    '0': '',
    '1': 'text-green-500',
    '-1': 'text-red-500',
  }
  return map[status.toString()]
}
function renderStatus(status) {
  const map = {
    '0': '新申请',
    '1': '已开票',
    '-1': '已驳回',
  }
  return map[status.toString()]
}

function onPageNumChange(e) {
  pageNo.value = e.current
}

const { setCurrentInvoice } = useMeStore()
function goInvoiceDetail(item) {
  setCurrentInvoice(item)
  uni.navigateTo({ url: `/pages/me/view/invoice-detail?id=${item.id}` })
}

onShow(() => {
  onGetInvoiceList()
})
</script>

<template>
  <view class="bg-[#F5F5F5] pb-safe min-h-safe">
    <nut-navbar title="发票申请记录" custom-color="#000" left-show placeholder fixed />
    <main class="mt-1.5 bg-white">
      <nut-empty v-if="invoiceList.length === 0" description="暂无发票记录">
        <template #image>
          <view class="center h-full">
            <image class="block !h-230 !w-180" src="../../../static/image/me/empty.jpg" />
          </view>
        </template>
      </nut-empty>
      <view v-else>
        <uni-table stripe border>
          <uni-tr>
            <uni-th width="110" align="center">
              <view class="text-black">
                商家
              </view>
            </uni-th>
            <uni-th width="70" align="center">
              <view class="text-black">
                金额
              </view>
            </uni-th>
            <uni-th width="110" align="center">
              <view class="text-black">
                申请时间
              </view>
            </uni-th>
            <uni-th width="70" align="center">
              <view class="text-black">
                状态
              </view>
            </uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="item in invoiceList" :key="item.id">
            <uni-td align="center">
              <view class="text-[#3E7CDE] underline underline-offset-4" @click="goInvoiceDetail(item)">
                {{ item.merchantName }}
              </view>
            </uni-td>
            <uni-td align="center">
              {{ item.money }}
            </uni-td>
            <uni-td align="center">
              {{ item.createTime.split(' ')[0] }}
            </uni-td>
            <uni-td align="center">
              <view :class="renderClass(item.status)">
                {{ renderStatus(item.status) }}
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
        <view class="px-2 py-1">
          <uni-pagination :total="listTotal" :current="pageNo" :page-size="10" @change="onPageNumChange" />
        </view>
      </view>
    </main>
  </view>
</template>
